<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#js_base">JS基础</a></div>
        <div><a href="#js_true">JavaScript标准</a></div>
        <div><a href="#js_two">JavaScript解析机制:(预解析;逐行解读代码)</a></div>
        <div><a href="#js_face_object">JS面向对象</a></div>


        <div><a href="#js_loop">JavaScript循环</a></div>
        <div><a href="#js_function">Function</a></div>
        <div><a href="#js_internal_object">JS的内置对象:Array/String/Math/Date</a></div>
        <div><a href="#js_domReady">JS-domReady</a></div>
        <div><a href="#js_event">JS事件</a></div>
        <div><a href="#js_bom">JS BOM基础</a></div>
        <div><a href="#js_window">JS 窗口相关</a></div>
        <div><a href="#js_ps">切图工具PS</a></div>

    </div>
    <div class="substance">
        <div class="one">
            <h1 id="js_base">JS基础 | <a target="_blank" href="../demo/9-JS实现轮播图demo.html">JS实现轮播图Demo</a>
            </h1>
            <pre class="bj">
常见的语法错误:
        (1)符号漏打,多打,少打,错打
        (2)使用了不合语法的变量名
        (3)语句写错,没写完等

运行时错误:
        (1)ReferenceError，变量引用异常触发
        (2)TypeError，类型使用错误时触发
        (3)RangeError，不太常见,一般会在递归爆栈时触发,即递归深度太深

debugger,断点与单步跟踪; try catch finally 语句

1)算术操作 +、-、*、/、%(取余);  +运算符还可以连接字符串;
2)一元操作 ++、--;
    ++a先返回递增之后的a的值
    a++先返回a的原值,再返回递增之后的值
3)逻辑运算 ! 、&& 、||
    逻辑与: &&  -->如果前一个条件为真,则返回下一个条件计算结果(注意不是true或false);
        操作数类型--非布尔值: 字符转化之后为true或者false;
        例如:字符串,数组等;有几个特例;转化之后为 false 的字符有:0 ,''(空字符串),undefined,null,NaN;
    && 与 （只要有一个条件不成立，返回false）
        <span class="text">说明：在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值</span>
        此时它遵循下列规则：
            1、如果第一个操作数隐式类型转换后为true，则返回第二个操作数
            2、如果第一个操作数隐式类型转换后为false，则返回第一个操作数
            3、如果有一个操作数是null，则返回null
            4、如果有一个操作数是NaN，则返回NaN
            5、如果有一个操作数是undefined，则返回undefined
        说明：
            1、2在两个操作数情况下。
            3、4、5在前面的操作数隐式类型转换后为ture 的情况时

    逻辑或: ||  -->当所有参数都为假时,返回最后一个条件计算结果;否则返回第一个为真的条件计算结果;(注意不是true或false);
    || 或 (只要有一个条件成立,返回true)
    说明：在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值,此时它遵循下列规则：
        1、如果第一个操作数隐式类型转换后为true，则返回第一个操作数
        2、如果第一个操作数隐式类型转换后为false，则返回第二个操作数
        3、如果两个操作数是null，则返回null
        4、如果两个操作数是NaN，则返回NaN
        5、如果两个操作数是undefined，则返回undefined
    说明：规则是两个操作数的情况

    ! 非
    说明：
        1、无论操作数是什么数据类型,逻辑非都会返回一个布尔值
        2、!!同时使用两个逻辑非操作符时:
            第一个逻辑非操作会基于无论什么操作数返回一个布尔值，
            第二个逻辑非则对该布尔值求反。

4)关系运算 <、>、<=、>=、!=、!==、==、===    ( 返回值:boolean型 )
    ==: 相等,只比较值是否相等                     !=: 不相等,比较值是否不相等
    ===: 全等,比较值的同时比较数据类型是否相等       !==:不全等,比较值的同时比较数据类型是否不相等

5)赋值操作 =、复合赋值（+=、-=、*=、/=）
6)三元操作符
    语法：条件 ? 执行代码1：执行代码2
    说明：可代替简单的if语句,如果条件成立,执行代码1,否则执行代码2

JavaScript是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性;
完整的JavaScript是由ECMAScript（语法）、Browser Objects（DOM、BOM）（特性）组成的;
可以在head或body中使用&lt;script&gt;嵌入JavaScript脚本

// 单行注释    /**/ 多行注释     语句结束使用分号,如果省略,则由解析器确定语句的结尾;

JavaScript 区分大小写;
1、什么是标识符？  变量、函数、属性的名字,或者函数的参数。
2、标识符的命名规则：
    • 由字母、数字、下划线（_）或美元符号（$）组 成
    • 不能以数字开头
    • 不能使用关键字、保留字等作为标识符

ECMAScript的变量是松散类型: 可以用来保存任何类型的数据; 换句话说，每个变量仅仅是一个用于保存值的占位符而已

变量的声明与赋值
1、变量声明： 变量的声明要使用var操作符,语法：var 变量名
2、变量赋值：声明的同时赋值：var 变量名=值;   先声明后赋值： 变量名=值
说明：
    1、省略var声明的变量是全局变量
    2、不推荐省略var操作符来定义全局变量

JavaScript的数据类型
ECMAScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String;还有1种复杂数据类型：Object

typeof
    语法：typeof 变量 或 typeof(变量)
    功能：检测变量类型
    返回值：string类型，有可能是：string、number、boolean、object、undefined、function

undefined
    undefined类型只有一个值，即特殊的undefined。 说明：一般而言，不存在需要显式地把一个变量设置为undefined值的情况

null
    1、null值表示一个空对象指针
    2、如果定义的变量准备在将来用于保存对象，那么最好将变量初始化为null而不是其他值。
    说明：undefined值是派生自null值的，所以undefined==null的返回结果是true

Number
    Number：表示整数和浮点数
    NaN：即非数值（Not a Number）是一个特殊的数值
    说明：
        1、任何涉及NaN的操作（例如NaN/10）都会返回NaN。
        2、NaN与任何值都不相等，包括NaN本身

isNaN()
    语法：isNaN(n)
    功能：检测n是否是“非数值”
    返回值：boolean
    参数：参数n可以是任何类型
    说明：isNaN()在接收到一个值之后,会尝试将这个值转换为数值;某些不是数值的值会直接转换为数值

数值转换
    有3个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。
    其中Number()可以用于任何数据类型,而parseInt()和parseFloat()则专门用于把字符串转换成数值。
1)parseInt():会忽略字符串前面的空格，直至找到第一个非空格字符。
说明：
    1、parseInt()：转换空字符串返回NaN。
    2、parseInt()这个函数提供第二个参数：转换时使用的基数(即多少进制)
2)parseFloat(): 从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止
说明：
    除了第一个小数点有效外,parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零。
    注：如果字符串中包含有效的十六进制格式，parseInt('0xf')将'0x'转换为相同大小的十进制数值而parseFloat('0xf')只会输出0

String类型用于表示由零或多个16位Unicode字符组成的字符序列,即字符串.字符串可以由双引号(")或单引号(')表示;
toString()与String()
    语法：str.toString()
    功能：将str转换为字符串
    返回值：str的一个副本参数：str是要转换的内容，可以是数值、布尔值、对象和字符串。
    说明： 在不知道要转换的值是不是null或undefined的情况下，还可以使用String()函数，它能够将任何类型的值转换为字符串。

Boolean:用于表示真假的类型，即true表示真，false表示假

类型转换
    1、除0之外的所有数字，转换为布尔型都为true
    2、除””之外的所有字符，转换为布尔型都为true
    3、null和undefined转换为布尔型为false

什么是表达式: 将同类型的数据（如常量、变量、函数等）,用运算符号按一定的规则连接起来的、有意义的式子称为表达式

            </pre>
        </div>
        <div class="one">
            <h1 id="js_true">JavaScript标准</h1>
            <pre class="bj2">
所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）
ECMAScript 4（ES4）未通过。
ECMAScript 5（ES5，2009 年发布），是 JavaScript 最新的官方版本。

以下就是 ECMAScript 的全部关键字（带*号上标的是第 5 版新增的关键字）:
break       do      var       typeof      case      else        new     instanceof      switch
catch       void    return    finally     with      continue    for     debugger*       while
function    this    default   if          throw     delete      in      try

ECMA-262 第 3 版定义的全部保留字:
abstract    enum    int       short       boolean   export      byte    static          interface
extends     long    super     char        final     native      class   float           synchronized
package     throws  const     volatile    private   transient   double  import          implements
debugger    public  goto      protected

第 5 版把在非严格模式下运行时的保留字缩减为下列这些:
class       enum    extends   super       const     export      import
在严格模式下，第 5 版还对以下保留字施加了限制:
implements  package  public   interface   private   static      let     protected       yield
另外，let 和 yield 是第 5 版新增的保留字；其他保留字都是第 3 版定义的。为了最大程度地保证兼容性，建议大家将第 3 版定义的保留字外加 let 和 yield 作为编程时的参考。

return:用在函数中,跳出函数      continue:用在循环中,跳出本次循环      break:用在循环中,跳出当前循环

变量命名规则: $ _ 字母 数字;(不能以数字开头)   基本类型: number string boole undefined null    引用类型: [] {}
基本类型变量: 不可以修改;保存在栈内存中;按值访问;值相等即相等;复制时,创建一个副本;按值传递参数;用typeof检测类型
引用类型变量: 可以修改;保存在堆内存中(地址值保存在栈内存中);按引用访问;同一引用才相等;复制的其实是指针;按值传递参数;用instanceof检测类型

<span class="text_flag">for in 语句的使用:</span>
	1)定义： W3C 给出的解释是：for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。也就是说，for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
	2)语法: for(变量 in 对象){ }  // ”变量”可以是数组的元素，也可以是对象的属性。
	3)遍历数组demo:
			var arr=["html","css","JavaScript","JQuery"];
			for(p in arr){
				console.log(p); //索引
				console.log(arr[p]); //索引对应的数据
			}
	4)遍历对象demo:
			var person={'name':'summer','sex':'girl','age':18};
			for(v in person){
				console.log(v); //获取到的是 person 对象中的每个属性
				console.log(person[v]);// 获取到的是 person 对象中属性所对应的属性值
			}

demo:(全局变量默认会成为window的属性)
	var name = 'xm';  console.log(window.name === name); //true

<span class="text_flag">"use strict";  //放在文件头,表示严格模式</span>

<span class="text_flag">JavaScript 内存管理与垃圾回收机制:</span>
1. 为什么要进行垃圾回收?
因为程序中存在很多数据,这些数据在内存中占据一定的空间.在程序运行中,一些没有用的数据(这些数据可以称为垃圾)还会在内存中占据空间.
如果不进行垃圾回收的话,随着程序的运行,可用的内存越来越小,必然会带来程序性能的下降,造成卡、慢甚至系统异常。

2. js 垃圾回收机制(释放无用的数据,回收内存)
Javascript 具有自动垃圾回收机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。
原理:垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

3.垃圾收集算法
	1)引用计数(不推荐,循环引用问题得不到解决)
		引用计数的含义是跟踪记录每个值被引用的次数;当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1;如果同一个值又被赋给另一个变量，则该值的引用次数加 1
	2)标记清除(环境中的变量)
		js 中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。
		此时的变量在函数执行过程中一直存在，直到函数结束后，将变量标记为“离开环境”，变量就被回收了;(JavaScript 中全局变量的在浏览器卸载页面才会被销毁)
		demo1:
			function count(){ var num=0; num++; console.log(num); }
			count(); //1
			count(); //1
			函数count被调用了两次结果num都输出1,说明当第一次执行之后函数里面的变量num会被回收。
			然后在第二次调用时又重新声明变量num并初始化为0,再进行计算输出结果 1;

4.内存管理
计算机分配给 Web 浏览器的可用内存数量通常要比分配给桌面应用程序的少。这样做的目的主要是出于安全方面的考虑，
目的是防止运行 JavaScript的网页耗尽全部系统内存而导致系统崩溃。因此，确保占用最少的内存可以让页面获得更好的性能。
而优化内存占用的最佳方式,就是为执行中的代码只保存必要的数据;
一旦数据不再有用,最好通过将其值设置为null来释放其引用——这个做法叫做解除引用(deReferencing)
            </pre>
        </div>
        <div class="one">
            <h1 id="js_two">JavaScript解析机制:(预解析;逐行解读代码)</h1>
            <pre class="bj">
JS解析机制(JS的解析过程):  (1) 预解析(寻找var定义的变量+function声明的函数)   (2) 逐行解读代码
预解析概念:
	在当前作用域下,js 运行之前,会把带有 var 和 function 关键字的事先声明,并在内存中安排好.(这个过程也可以理解为变量提升)然后再从上到下执行 js语句。
	预解析只会发生在通过 var 声明的变量和 function 声明的函数上.
	如果重复定义变量;后面的会覆盖前面的;但是预解析的时候,也是:undefined
	如果定义了变量a,之后又定义了同名函数a;预解析的时候:保留函数,变量被舍去;
	如果定义了同名函数;预解析的时候,舍去前面定义的;保留后面定义的函数.
预解析过程：
		（1）把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
		（2）把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
		（3）先提升 var，在提升 function
			因此，我们在定义函数时，绝大多数都使用第一种方式(函数声明的方式)	当匿名函数多用于定时器里面和注册事件的时候，
			比如: btn.onclick=function(){ console.log('这是一个匿名函数'); }

作用域链是用来查询变量的

demo1:(使用var定义的变量预解析,告诉解析器知道有这个名字的存在并默认将该变量赋值 undefined)
	console.log(x);  //undefined
	var x=15;
	解释:变量x虽然是在console.log后面定义的,但是使用var声明的x会提前保存在内存中,并赋值undefined,然后再从上往下执行js语句.
		它的执行顺序类似于如下:
			var x;
			console.log(x);
			var x=15;
		先声明了x,x没有赋值,默认赋值为 undefined,输出的结果自然为 undefined. 然后再给 x 赋值为 15.
demo1:
	console.log(x);  // error: x is not defined
	x=15;
	解释: x没有使用var声明,不存在预解析,所以报错找不到x

demo2:(使用function定义函数的预解析;先告诉解析器这个函数名的存在,然后再告诉解析器这个函数名的函数体是什么)
	alert(xx);
	function xx(){ return '整个函数都会提升到最前面'; }
	解释:声明函数会把整个函数都提升到最前面,所以结果会输出整个函数,结果如下: f xx(){ return '整个函数都会提升到最前面'; }
demo2:(如果在一个函数作用域中声明一个变量,那么它也会提升到函数作用域的最上面)
	var a=1;
	function xx(argument){ console.log(a); var a=2; }
	xx(); // undefined
	解释:函数里面的变量a会被提升到函数作用域的最前面,并且赋值为 undefined,所以输出结果为 undefined
		1)预解析:(寻找 var 定义的变量 + function 声明的函数)
		  window作用域的变量:
			  (1)a = undefined
			  (2)function xx(){ console.log(a); var a=2; }
		  局部作用域变量 xx
			  (1)a = undefined  -->>因为函数里使用var定义了变量a,所以不会去查找全局作用域下的变量a;
			  (2)argument = undefined
		2)逐行解读代码


demo3:(函数的参数也可以理解为函数作用域的变量)
	var a=1;
	function xx(a){ console.log(a);	}
	xx(); // undefined
	console.log(a); // 1
	解释: 为函数xx传递一个形参a,由于函数在调用时没有传递实参(也就是说变量a没有赋值),所以为 undefined.
		 而在全局下输出a自然在全局下查找变量a结果为1.

demo4:(变量或函数覆盖: 同一个作用域下声明两个相同的变量或者函数,那么后一个会覆盖前一个)
	var a=1;
	var a=2;
	console.log(a); //2
	function x(){ console.log('x') }
	function x(){ console.log('xx') }
	x(); // xx

demo5:(函数覆盖变量)
	var m;
	function m(){ console.log('11'); }
	m(); // 11
	解释:如上中,先声明变量m,然后声明函数m. 函数m会把变量m覆盖,所以调用m输出“11”
demo5:(变量覆盖函数)
	var m=1;
	function m(){ console.log('11'); }
	m(); // error: m is not a function
	解释:如上代码中,也是先声明变量m然后声明函数m; 函数m会把变量m覆盖.<span style="color: red;font-size: large">需要注意的是,变量赋值不会进行预解析;</span>代码执行阶段,函数m重新赋值为1.
	即调用的时候m已经不是一个函数了,所以会报错。代码相当于如下:
		var m;
		function m(){ console.log('11') }
		m=1;
		m();// error: m is not a function

demo6:(变量函数循环覆盖)
	console.log(a);  //function a(){console.log(4)};
	var a=1;
	console.log(a); //1
	function a(){console.log(2)}
	console.log(a); //1
	var a=3;
	console.log(a); //3
	function a(){console.log(4)};
	console.log(a); //3
	a(); // error: a is not a function
	解释:如上代码中,变量a与函数a依次预解析; function a() {console.log(4)} 是最后声明的,所以会把前面都覆盖;
	逐行执行代码:
	    第一次输出的 function a() {console.log(4)};
	    后面给函数 a 重新赋值为 1 ,第二次输出 1;
	    第二次输出后面是一个函数,函数已经提前声明了,这里不会执行它;
	    则第三次输出 a 还是 1;紧跟着后面重新赋值为 3,所以第四次输出为 3;后面又是一个函数,也不会执行;
	    所以第五次输出还是 3;最后调用 a,由于a是一个数字,调用它会报错“a 不是一个函数”

demo7:(函数中使用全局变量)
	var a = 1;
	function fn() {console.log(a); a = 2;	}
	fn(); //1
	console.log(a); //2
	解释: 预解析var声明的变量a和函数fn();函数里没有使用var声明变量a,所以会使用全局作用域变量a;

demo8:(函数参数名与全局参数同名)
	var a = 1;
	function fn(a) { console.log(a); a = 2;	}
	fn(); // undefined
	console.log(a); // 1
	解释:预解析变量a和函数fn;逐行执行代码,调用函数fn时没有传递参数,所以实参a默认值为undefined;

demo9:(函数参数名与全局参数同名2)
	var a = 1;
	function fn(a) {console.log(a);	a = 2;}
	fn(a);//1
	console.log(a);//1
	解释:预解析变量a和函数fn;逐行执行代码,调用函数fn时传递实参1;由于变量a是基本类型,所以函数里对实参a操作;不影响全局变量a;

demo10:(预解析是分标签进行的)
	&lt;script&gt;
		var a = 1;
	&lt;/script&gt;
	&lt;script&gt;
		console.log(a); //1
	&lt;/script&gt;
	解释:多个script标签按顺序执行;以上代码如果调换2个script标签顺序,则报错: a is not defined
            </pre>
        </div>
        <div class="one">
            <h1 id="js_face_object">JS面向对象</h1>
            <pre class="bj">
面向对象: 对代码的一种抽象,对外统一提供调用接口的编程思想
基于类的面向对象和基于原型的面向对象: 基于原型的面向对象方式中,对象(object)则是依靠构造器(constructor)利用原型(prototype)构造出来的
js面向对象的名词解释
	属性: 事物的特性  			方法: 事物的功能
	对象: 事物的一个实例 		原型: Js函数中由prototype属性引用了一个对象,即原型对象(原型)

js中的闭包: 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)

对象的创建方式:
    1) var car = {};
    2) var car = new Object();
    3) Object.create();      // ES5提供的语法
访问对象属性的方式:
    1) cat.name = 'tom';        //为对象cat的name属性赋值
    2) cat['name'] = 'tom';     //为对象cat的name属性赋值
删除对象的属性:
    1) delete cat.name;
    2) delete cat['name'];
判断对象是否包含某个属性:   console.log('name' in cat);
遍历对象的属性名/值:
    for( var p in cat){
        console.log(p);
        console.log(cat[p]);// 或 cat['p']
    }

delete 用法:
	1)delete 可以删除对象中的属性和方法
			function Fun(){
				this.name='ZhangSan';
				this.say=function(){ alert(this.name) }
			}
			var obj =new Fun();
			delete obj.name; //删除name属性
			delete obj.say;	 //删除say方法
			console.log(obj.name); // undefined
			obj.say();  // Uncaught TypeError: obj.say is not a function

	2)delete 不可以删除变量
			var per='hello';
			delete per;
			console.log(per); //hello

	3)delete 不可以删除原型链上的属性和方法
			function Fun(){  }
			Fun.prototype.greeting=function(){ alert('hello') }
			var obj=new Fun();
			delete obj.greeting;
			obj.greeting(); //弹出hello

js字面式对象声明对象:
	var obj = {
		属性名:属性值,
		属性名:属性值,
		属性名:属性值,
		...
		方法名称:function(){},
		方法名称:function(){},
		...
	}

new操作符后跟Object构造函数:
	var obj =new Object();
	obj.属性 = 属性值;
	obj.属性 = 属性值;
	obj.方法 =function(){};

js中构造方法声明对象:
	function test([参数列表]){
		this.属性=属性值;
		this.方法=function(){}
	}
	var obj=new test(参数列表);

js中工厂方式声明对象:
	function createObject(参数列表){
		var obj = new Object();
		obj.属性名=属性值;
		obj.方法名=function(){};
		return obj;
	}
	var box = createObject(参数列表);

js中原型模式声明对象:
				function test(){ }
				test.prototype.属性=属性值;
				test.prototype.属性=function() { };
				var obj=new test();


封装(Encapsulation)：把对象内部数据和操作细节进行隐藏

原型和原型链
	原型：是利用prototype添加属性和方法
	原型链：JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype
	new function() 创建的对象都是函数对象;函数对象都有 prototype属性(这个属性引用了一个对象,原型对象,简称原型);
	js对象都有一个 __proto__ 内置属性,用于指向创建它的函数对象的原型对象prototype(即它的构造函数的原型对象)

原型继承: 利用原型让一个引用类型继承另一个引用类型的属性和方法
				var a=function(){};
				a.prototype.say=function(){ alert('haha') };
				a.prototype.gongZi=5000;
				var b=function(){};
				b.prototype=new a();
				b.prototype.gongZi=7000;
				var obj= new b();
				注:子元素的成员属性gongZi会覆盖父元素

构造函数继承: 在子类内部构造父类的对象实现继承
				function parents(name){
					this.name=name;
					this.say=function(){ alert(this.name); }
				}
				function child(name,age){
					this.pobj=parents;
					this.pobj(name);
					this.age=age;
				}
				var c= new child('lisi',25);

call和apply (2者都是,调用一个对象的一个方法,以另一个对象替换当前对象):
传参方式不同,call: 是参数列表;    apply:是数组

js面向对象的关键词: instanceof、delete、call、 apply、arguments、 callee、this

<span class="text_flag">对象冒充: 将父类的属性和方法一起传给子类作为特权属性和特权方法</span>
			</pre>
        </div>


        <div class="one">
            <h1 id="js_loop">JavaScript循环</h1>
            <pre>
1)For循环: 循环次数是固定的
    语法: for(语句 1；语句 2；语句 3)｛ 被执行的代码块；｝
        语句 1: 在循环（代码块）开始前执行
        语句 2: 定义运行循环（代码块）的条件
        语句 3: 在循环（代码块）已被执行之后执行

2)while循环: 循环次数不是固定的
    语法: while（条件）｛ 需要执行的代码； 变量变化语句； ｝

3)do...while循环: 不管条件符合不符合，先运行一次代码
    语法: do｛ 需要执行的代码；｝ wile（条件）

(4) if语句:  if( condition ){ statement1; }
            if( condition ){ statement1; } else { statement2; }
            if( condition ){statement1; }else if(condition){ statement2;} …else{ statement3; }

break：立即退出循环    continue：结束本次循环，继续开始下一次。

prompt():功能：弹出输入框
    返回值： 1、点击确定,返回输入内容   2、点击取消，返回null

alert(): 功能：弹出警告对话框

length:  语法：string.length    功能：获取string字符串的长度    返回值：number

获取星期: 语法：new Date().getDay()    功能：获取星期    返回值：number (0-6)

输出:    语法：document.write(“内容”)     功能：向浏览器输出内容

switch语句
        语法：
            switch( expression ){
                case value:statement
                break;
            case value:statement
                break;
            ……
            default:statement
            }
            </pre>
        </div>
        <div class="one">
            <h1 id="js_function">Function</h1>
            <pre class="bj2">
函数的作用：通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行
函数的定义: 函数使用function声明,后跟一组参数一级函数体,语法如下：
    function functionName([arg0,arg1,…]){ statements }
    说明：
        1、functionName是要定义的函数名，属于标识符
        2、 []中的arg0,arg1,… 为函数的参数，不是必须的
        3、[]只说明里面的内容不是必须的，它不是语法
函数的调用语法：  函数名([arg1,arg2,…])
函数的返回值: 任何函数在任何时候都可以通过return语句后跟要返回的值来实现返回值。
    说明：
        1、函数会在执行完return语句之后停止并立即退出。
        2、return语句也可以不带有任何返回值，一般用于需要提前停止函数执行而又不需要返回值的情况下

arguments: ECMAScript中的参数在内部用一个数组来表示，在函数体内通过arguments对象来访问这个数组参数。
    说明：
        1、arguments对象只是与数组类似，并不是Array的实例
        2、[] 语法访问它的每一个元素。
        3、length属性确定传递参数的个数


定义函数的三种方式:(<span class="text_flag">函数是特殊的对象</span>)
	1)字面量					function fn() {}
 	2)构造函数 				var fn = new Function();
	3)赋值表达式(也叫匿名函数) 	var fn = function () {};

自执行函数(有两种写法)
	(1)(function(){})()    //推荐使用
		//这样写的原理是:他是由函数表达式演变过来的,var fn=function(){} fn(); 把 fn 替换成:function(){},就成了:function(){}();
		  为了保持整体性,在 function 加上一个(),所以就变成了 (function([这里是形参]){})([这里是实参])
	(2)(function(){}())
		// 值得注意的是,用这种写法会有一个小漏洞,看个例子
			var fn = function(){ console.log(123);}
			(  function(){ console.log(123);} ()  )
			可以很明显的看到( function(){console.log(456);} () ) 这个自执行函数调用输出了 456,同时,这个自执行函数跟在匿名函数的后面,
			JS解析的时候把这个匿名函数也解析成为了自执行函数,所以就输出了123,解决的办法很简单,在第一个匿名函数的后面加一个分号“;”或者直接采取第一种写法就能避免这种问题

函数的调用
	普通函数       fn()
	匿名函数       ( function(){} ) ()
	构造函数       new Object()
	方法           Obj.method()
	间接           fn.call()

<span class="text_flag">函数的参数:</span>
	形参  函数定义时括号内的参数,接收实参的值,个数为: fn_name.length
	实参  函数调用时括号内实际传递的参数,将值赋值给形参;个数为: arguments.length
1) 传递的实参个数少于形参个数时,多余的参数默认传递 undefined
2) arguments 是形参的类数组对象;每个函数都有这个变量,是局部变量;arguments对象类似: { '0':xx,'1':xx,...,length:2 }
    arguments.callee: 表示函数体本身
	demo1:(求和,参数个数不定)
		function add(){
			if( arguments.length == 0 ) return;
			var sum = 0;
			for(var i = 0; i < arguments.length; i++){ sum += arguments[i]; }
			return sum;
		}
		add();  // undefined
		add(1,2,3,4); // 10
	demo2:(arguments改变实参的值)
		function fn(name){
			arguments[0] = 'xm'; // 会改变实参的值
			console.log(name);
		}
		fn('xx'); // 打印xm
	demo3: arguments 是每个函数独有的
		function fn(){
			console.log(arguments);
			function fn2(){  console.log(arguments); }
			fn2(2); // 2
		}
		fn(1);// 1
	demo4:(递归调用的另一种方式; arguments.callee:指函数本身; 常用于递归调用; 严格模式下不允许使用.)
		var xx = function fn(num){
			if(num <= 1) return 1;
			return num * fn(num -1);
		};
		xx(5);
	demo5: 判断实参和形参个数是否相等
		function add(num1,num2){
			if( arguments.length != add.length)  throw new Error('请传入' + add.length + '个参数');
			return num1 + num2;
		}
		add(1,3); // 4
		add(1);   // Uncaught Error: 请传入2个参数
<hr>
demo1:(添加属性和方法)
	var person = {};
	person.name = 'xm';
	person.setName = function (name) {this.name = name;	}
	function add(num1, num2) { return num1 + num2;	}
	add.sex = 'male';
	add.setSex = function (sex) { this.sex = sex;	}
	console.log(add.sex); //male
	console.log(add.setSex('female'));  // undefined
	console.log(add.sex); //female
	console.log(add(1, 2)); //3

demo2:(作为数据值使用)
	var person = {};
	var add = function () {return 1;};
	console.log(add()); //1
	console.log(add);   //function () {return 1;};

demo3:(作为参数)
	setTimeout(function () {console.log(1);	}, 1000);
	setTimeout(fn, 1000);
	function fn() {	console.log(1);	}

demo4:(作为返回值)
	function fn() {	return function () {console.log(1);};	}
	var newFn = fn();
	newFn();  // 1
	fn()();   // 1

demo5:(3种函数声明方式区别)
	function add(num1) {    }
    var add = function () {    };
    var add = new Function('num1', 'num2', 'return num1 + num2;');

demo6:(对象)
	var person = {
		name: 'xm',
		setSex: function(sex) { this.sex = sex;	}
	};
	person.setName = function(name) { this.name = name;}
	person.setSex();

demo7:(自执行函数的其他方式,添加特殊前缀,绕过预解析)
	!+-~function(){ console.log(1);	}();

demo8:(递归调用)
	function factorial(num) {
		if (num <= 1) return 1;
		return num * factorial(num - 1);
	}
	console.log(factorial(5));

demo9:(函数作为对象的属性)
	var operation = {
		add: function (num1, num2) { return num1 + num2; },
		subtract: function (num1, num2) { return num1 - num2; },
		'@': function () { console.log('@是特殊字符'); },
		key: function () { console.log('key'); }
	};
	operation.add(1, 2); //3
	operation['@'](1, 2); //@是特殊字符
	var key = 'add';
	operation[key](1, 2); //3

demo10:(链式调用)
	var operation = {
		add: function (num1, num2) {
			console.log(num1 + num2);
			return this;
		},
		subtract: function (num1, num2) {
			console.log(num1 - num2);
			return this;
		},
		'@': function () { console.log('@'); },
		key: function () { console.log('key'); }
	};
	operation.add(1, 2).subtract(2, 1);

demo11:(<span class="text_flag">函数的间接调用,每个函数都有call()和apply()方法</span>)
    function add(num1,num2){ return num1 + num2; }
    add(1,2);
    add.call(windows,1,2); // 第一个参数对应this指向(换句话来说就是改变this的指向); 第二个参数起,依次对应add()里面的参数; call()方法的参数不固定
    add.apply(windows,[1,2]);//  和call()方法一样;唯一的不同点;第二个参数是数组; apply()方法只有2个参数

            </pre>
        </div>
        <div class="one">
            <h1 id="js_internal_object">JS的内置对象:Array/String/Math/Date</h1>
            <h2>Array</h2>
            <pre>
创建数组的基本方式有两种：
    1、使用 Array构造函数 语法：new Array()
        小括号( )说明：
        （1）预先知道数组要保存的项目数量
        （2）向Array构造函数中传递数组应包含的项
    2、使用数组字面量表示法:  由一对包含数组项的方括号[ ]表示，多个数组项之间以逗号隔开

读取和设置值时，使用方括号[ ]并提供相应的索引;索引是从0开始的正整数

array.length:获取数组array的长度; 返回值：number
    说明：
    1、通过设置length可以从数组的末尾移除项或向数组中添加新项。
    2、当把一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，长度值等于最后一项的索引加1

掌握数组的栈方法:
    1)arrayObject.push(newele1,newele2,....,neweX)
        功能：把它的参数顺序添加到 arrayObject 的尾部。
        返回值：把指定的值添加到数组后的新长度。
    2)arrayObject.unshift(newele1,newele2,....,neweX)
        功能：把它的参数顺序添加到 arrayObject 的开头。
        返回值：把指定的值添加到数组后的新长度
    3)arrayObject.pop()
        功能：删除 arrayObject 的最后一个元素
        返回值：被删除的那个元素
    4)arrayObject.shift()
        功能：删除 arrayObject中的第一个元素
        返回值：被删除的那个元素

arrayObject.join(separator)
    功能：用于把数组中的所有元素放入一个字符串。
    返回值：字符串。

arrayObject.reverse()
    功能：用于颠倒数组中元素的顺序。
    返回值：数组

arrayObject.sort(sortby)
    功能：用于对数组的元素进行排序。
    返回值：在原数组上进行排序,原数组会发生变化,不会生成新的数组.
    说明：1、即使数组中的每一项都是数值，sort()方法比较的也是字符串。
         2、sort()方法可以接收一个比较函数作为参数
    升序排序: sortby=function(a,b) { return a-b; }
    降序排序: sortby=function(a,b) { return b-a; }

arrayObject.concat(arrayX,arrayX,......,arrayX)
    功能：用于连接两个或多个数组。
    返回值：数组。

arrayObject.slice(start,end)
    功能：从已有的数组中返回选定的元素。
    参数：start （必需）规定从何处开始选取，如果是负数，那么它规定从数组尾部开始算起的位置。
         end（可选）规定从何处结束选取，该参数是数组片断结束处的数组下标。
    说明：1、如果没有指定end，那么切分的数组包含从 start 到数组结束的所有元素。
        2、如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。
    返回值：数组

arrayObject.splice(index,count)
    功能：删除从 index 处开始的零个或多个元素。
    返回值：含有被删除的元素的数组。
    说明:count是要删除的项目数量，如果设置为 0，则不会删除项目;如果不设置，则删除从index开始的所有值

arrayObject.splice(index,0,item1,.....,itemX)
    功能：在指定位置插入值
    参数： Index：起始位置; 0：要删除的项数; item1…itemX：要插入的项
    返回值：数组

arrayObject.splice(index,count,item1,.....,itemX)
    功能：在指定位置插入值，且同时删除任意数量的项
    参数： Index：起始位置      count：要删除的项数        item1…itemX：要插入的项
    返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）

arrayObject.indexOf(searchvalue，startIndex)
    功能：从数组的开头（位置0）开始向后查找。
    参数： searchvalue：必需，要查找的项；    startIndex：可选，起点位置的索引。
    返回值： number，查找的项在数组中的位置，没有找到的情况下返回-1。

arrayObject.lastIndexOf(searchvalue，startIndex)
    功能：从数组的末尾开始向前查找。
    参数：searchvalue：必需，要查找的项；    startIndex：可选，起点位置的索引。
    返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1。

说明:  1、在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等。
      2、数组的位置方法是ECMAScript5为数组实例新增的，所以支持的浏览器有：IE9+、Firefox、Safari、Opera和Chrome。

                    </pre>
            <h2>String</h2>
            <pre>
stringObject.charAt(index) :返回stringObject中index位置的字符
stringObject.charCodeAt(index) :返回stringObject中index位置字符的字符编码
说明: ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined

stringObject.indexOf ("o")
    功能： 从一个字符串中搜索给定的子字符串，返回子字符串的位置。
    返回值：数值
    说明：如果没有找到该子字符串，则返回-1

stringObject.lastIndexOf ("o")
    功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置
    返回值：数值
    说明：如果没有找到该子字符串，则返回-1

stringValue.slice(start,end)
    功能：截取子字符串。
    参数说明：
        1、start：必需，指定子字符串的开始位置。
        2、end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。
        3、当参数为负数时，会将传入的负值与字符串的长度相加

substring() :语法及功能同slice()完全一样。
区别在于：
    1、当参数为负数时，自动将参数转换为0。
    2、substring()会将较小的数作为开始位置，将较大的数作为结束位置。

stringValue.substr(start,len)
    功能：截取子字符串。
    参数说明：
        1、start：必需，指定子字符串的开始位置。
        2、len：可选，表示截取的字符总数，省略时截取至字符串的末尾。
        3、当start为负数时，会将传入的负值与字符串的长度相加。
        4、当len为负数时，返回空字符串。

stringObject.split(separator)
    功能：把一个字符串分割成字符串数组。
    返回值：Array。
    说明：separator：必需，分隔符。

stringObject.replace(regexp/substr,replacement)
    功能：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
    返回值：String
    参数：
        regexp：必需。规定子字符串或要替换的模式的 RegExp 对象。
        replacement:：必需。一个字符串值。

stringValue.toUpperCase() :把字符串转换为大写。
stringValue.toLowerCase() :把字符串转换为小写
                    </pre>
            <h2>Math</h2>
            <pre>
Math.min(num1,num2…numN) :求一组数中的最小值; 返回值：Number
Math.max(num1,num2…numN) :求一组数中的最大值; 返回值：Number
Math.ceil(num) :向上取整，即返回大于num的最小整数。返回值：Number。
Math.floor(num) :向下取整，即返回num的整数部分。返回值：Number。
Math.round (num) :将数值四舍五入为最接近的整数。返回值：Number。
Math.abs (num) :返回num的绝对值。返回值：Number
Math.random() :返回大于等于0小于1的一个随机数。返回值：Number。
    求n到m之间的随机整数的公式： random = Math.floor( Math.random() * (m-n+1) + n );

            </pre>
            <h2>Date</h2>
            <pre>
如何创建一个日期对象: new Date(); 功能：创建一个日期时间对象
返回值：不传参的情况下，返回当前的日期时间对象。
说明： 如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数

获取年月日时分秒及星期的方法
    1、getFullYear()：返回4位数的年份
    2、getMonth()：返回日期中的月份，返回值为0-11
    3、getDate()：返回月份中的某一天
    4、getDay()：返回星期，返回值为0-6
    5、getHours()：返回小时
    6、getMinutes()：返回分
    7、getSeconds()：返回秒
    8、getTime()：返回表示日期的毫秒数

设置年月日时分秒及星期的方法
    1、setFullYear(year)：设置4位数的年份
    2、setMonth(mon)：设置日期中的月份，从0开始，0表示1月
    3、setDate()：设置日期
    4、setHours()：设置小时
    5、setMinutes()：设置分
    6、setSeconds()：设置秒
    7、setTime()：以毫秒数设置日期，会改变整个日期

2)setMonth(): 用于设置月份
    语法: dateObj.setMonth(month,day)
    参数: Month：必需要有。是一个表示月份的数值，这个数值是 0（一月）~11（十二月）之间
                -1 为去年的最后一个月; 12 为明年的第一个月; 13 为明年的第二个月;
         day：可选。表示月份的某一天的数值，这个数值是 1~31 之间
                如果当月有 31 天，32 为下个月的第一天
                如果当月有 30 天，32 为下个月的第二天
    返回值: 调整过的日期的毫秒数

            </pre>
        </div>
        <div class="one">
            <h1 id="js_domReady">JS-domReady</h1>
            <pre>
1、 什么是 domReady: 一个被封装的方法，用于当浏览器生成 DOM 树结构后就开始解析某些 js 代码。
2、 为什么需要 domReady:
    初学 JS 时，我们使用 window.onload 来保证页面所有的资源都加载完毕后才执行当中的 JS 代码,否则当 JS 在 title 中定义或者引用时会报错;不能为空节点添加 xxx 属性。
    随着学习的深入，当构建的页面存在大量图片或其他需要较长时间加载的资源时,显然让 JS 等待这些资源加载完毕，再执行是非常不合理且用户体验是不友好的。
    这时domReady 出现了，domReady 在 DOM 树生成后&其他资源加载以及渲染前就执行JS 代码。
3、 domReady 的原理: 渲染引擎的渲染 -->解析HTML构建DOM Tree  -->构建渲染树(解析样式信息)  -->布局渲染树(布局DOM节点)  -->绘制Render Tree渲染树
    讲解 domReady 原理之前,需要先了解渲染引擎的渲染（浏览器把请求的 html 显示出来的过程）基本流程：
    （1）解析 HTML，构建 DOM 树（构建 DOM 节点）；
    （2）构建渲染树（解析样式信息，包括外部的 css 文件、style 标签中的样式，按优先级解析）。渲染树由一些包含有各种属性的矩形组成，他们将会按照正确的顺序显示到屏幕上；
    （3）布局渲染树（布局 DOM 节点），执行布局的过程，将确定每个节点在屏幕上的确切坐标；
    （4）绘制渲染树（绘制 DOM 节点，即遍历渲染树），使用 UI 后端层来绘制每个节点
    说明：
        （1）domReady 就是在构建了 DOM 树之后就开始解析 JS，而不是等待页面渲染完毕。
        （2）HTML 是标记语言，它的本质就是告诉浏览器这里有什么节点，浏览器解析后才会变成 DOM 节点。
        （3）节点都是以树的形式组织的，当页面上的所有 HTML 都转换为节点，就称为domReady
4、实现 domRead
    使用 W3C 提供的 DOMContentLoaded 事件:
        //W3C提出的 DOMContentLoaded 方法比 onload 方法触发的时间更早;页面加载完DOM后立刻触发
        function myDOMReady(documentEle,fn){
            //判断如果支持 addEventListener
            if(documentEle.addEventListener){
                documentEle.addEventListener('DOMContentLoaded',fn,false);
            }else{
                IEContentLoaded(fn);
            }
        }
    以上方法仅供参考，实际工作中，如需使用，可以下载已经封装好的 domReady.js 插件

create 系列创建节点的方法
    1)document.createTextNode()方法用于创建一个文本节点，该方法接受一个参数，即要插入节点中的文本
    2)document.createComment()方法用来创建一个注释节点

改变元素节点中的内容:
    1)outerHTML: 输出当前标签的本身和标签内的文本内容，如果有子标签，那么子标签本身和标签内的文本内容也将一起输出
    2)outerText: 只输出当前标签内的文本内容，如果标签内有子标签，那么也只输出子标签内的文本内容

节点遍历——类数组对象:
    1)NodeList:NodeList是DOM操作(getElementsByTagName等)取出来的集合,是集合而不是普通的数组,但是他们有数组的一些属性,
        例如length、下标索引,但是他们也有自己的属性;例如item,另外NodeList最大的特点就是时效性(live)
    2)NodeList 转化为数组:
            &lt;script&gt;
                function collectionToArray(collection){
                    var ary = [];
                    for(var i = 0,len = collection.length; i &lt; len; i++){
                        ary.push(collection[i]);
                    }
                    return ary;
                }
            &lt;/script&gt;


HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合,
还提供了用来从该集合中选择元素的方法和属性,HTML DOM中的HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。

NamedNodeMap 对象代表一个节点的无序列表; length:返回列表中节点的数量。
    getNamedItem() 返回指定的节点（通过名称）。
    getNamedItemNS() 返回指定的节点（通过名称和命名空间）。
    item() 返回指定索引号的节点。
    removeNamedItem() 删除指定的节点（通过名称）。
    removeNamedItemNS() 删除指定的节点（通过名称和命名空间）。
    setNamedItem() 设置指定的节点（通过名称）。
    setNamedItemNS() 设置指定的节点（通过名称和命名空间）。

className 属性设置或返回元素的 class 属性。
语法:
    获取属性值：HTMLElementObject.className
    设置属性值：HTMLElementObject.className=classname


DOM基本概念: DOM是JS操控HTML和CSS的桥梁;DOM使JS操作HTML变得优雅
DOM简介: DOM（Document Object Model，文档对象模型）是JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便
        DOM最大的特点就是将文档表示为节点树

节点的nodeType属性可以显示这个节点具体的类型:
    nodeType值           节点类型
    1                   元素节点，例如p 和div
    3                   文字节点
    8                   注释节点
    9                   document节点
    10                  DTD节点

访问元素节点: 所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点
    ◆ 对节点进行操作，第一步就是要得到它
    ◆ 访问元素节点主要依靠document对象

认识document对象
    ◆ document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中
    ◆ document对象也表示整个HTML文档，它是DOM节点树的根
    ◆ document对象的nodeType属性值是9

访问元素节点的常用方法:
    1)document.getElementById() 通过id得到元素 IE6
        延迟运行
            ◆ 在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点
            ◆ 可以使用window.onload = function(){} 事件，使页面加载完毕后，再执行指定的代码

    2)document.getElementsByTagName() 通过标签名得到元素数组 IE6
        注意事项
            ◆ 即使页面上只有一个指定标签名的节点，也将得到长度为1的数组
            ◆ 数组方便遍历，从而可以批量操控元素节点
            ◆ 任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点

    3)document.getElementsByClassName() 通过类名得到元素数组 IE9
            ◆ 某个节点元素也可以调用getElementsByClassName()方法，从而得到其内部的某类名的元素节点

    4)document.querySelector() 通过选择器得到元素 IE8部分兼容、IE9完全兼容
        注意事项
            ◆ querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素
            ◆ querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child()、:[src^='dog']等CSS3选择器形式都支持良好

    5)document.querySelectorAll() 通过选择器得到元素数组 IE8部分兼容、IE9完全兼容
            querySelectorAll()方法的功能是通过选择器得到元素数组
            ◆ 即使页面上只有一个符合选择器的节点，也将得到长度为1的数组

节点的关系:
    子节点: childNodes                 父节点: parentNode
    第一个子节点: firstChild            最后一个子节点: lastChild
    前一个兄弟节点: previousSibling      后一个兄弟节点: nextSibling
注意：文本节点也属于节点
    ◆ DOM中，文本节点也属于节点，在使用节点的关系时一定要注意
    ◆ 在标准的W3C规范中，空白文本节点也应该算作节点，但是在IE8及以前的浏览器中会有一定的兼容问题，它们不把空文本节点当做节点

排除文本节点的干扰: 从IE9开始支持一些“只考虑元素节点”的属性
    关系                      考虑所有节点                   只考虑元素节点
    子节点                     childNodes                  children
    父节点                     parentNode                  同
    第一个子节点                firstChild                  firstElementChild
    最后一个子节点              lastChild                   lastElementChild
    前一个兄弟节点              previousSibling             previousElementSibling
    后一个兄弟节点              nextSibling                 nextElementSibling

 改变元素节点中的内容可以使用两个相关属性：
    ◆ innerHTML 属性能以HTML语法设置节点中的内容
    ◆ innerText 属性只能以纯文本的形式设置节点中的内容

改变元素节点的CSS样式需要使用这样的语句:
    oBox.style.backgroundColor = 'red'; //css属性要写成'驼峰'

如何改变元素节点的HTML属性:
    ◆ 标准W3C属性，如src、href等等，只需要直接打点进行更改即可   oImg.src = 'images/2.jpg';
    不符合W3C标准的属性，要使用setAttribute()和getAttribute()来设置、读取
        oBox.setAttribute('data-n',10);
        var n = oBox.getAttribute('data-n');  alert(n);

节点的创建
    ◆ document.createElement() 方法用于创建一个指定tagName的HTML元素
    var oDiv = document.createElement('div');
孤儿节点”
    ◆ 新创建出的节点是“孤儿节点”，这意味着它并没有被挂载到DOM树上，我们无法看见它
    ◆ 必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上
任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点
    语法:   父节点.appendChild(孤儿节点);
任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点
    语法:   父节点.insertBefore(孤儿节点, 标杆节点);

移动节点
    ◆ 如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动
            新父节点.appendChild(已经有父亲的节点);
            新父节点.insertBefore(已经有父亲的节点, 标杆子节点);
    ◆ 这意味着一个节点不能同时位于DOM树的两个位置

删除节点
    ◆ removeChild() 方法从DOM中删除一个子节点;
            父节点.removeChild(要删除子节点);
    ◆ 节点不能主动删除自己，必须由父节点删除它

克隆节点
◆ cloneNode() 方法可以克隆节点，克隆出的节点是“孤儿节点”
        var 孤儿节点 = 老节点.cloneNode();
        var 孤儿节点 = 老节点.cloneNode(true);
◆ 参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身
                    </pre>
        </div>
        <div class="one">
            <h1 id="js_event">JS事件</h1>
            <pre class="bj">
什么是事件？
    事件是可以被 JavaScript 侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。
常见的事件有：
    用户点击页面上的某项内容 |     鼠标经过特定的元素 |     用户按下键盘上的某个按键 |     用户滚动窗口或改变窗口大小 |     页面元素加载完成或加载失败
事件周期
    解释器创建一个event对象后，会按如下过程将其在HTML元素间进行传播
    第一阶段：事件捕获，事件对象沿DOM树向下传播
    第二阶段：目标触发，运行事件监听函数
    第三阶段：事件冒泡，事件沿DOM树向上传播
<img src="../image/js/event-1.png" width="40%"/>
什么是事件句柄？
    事件句柄(又称事件处理函数、事件监听函数)指用于响应某个事件而调用的函数。
    每一个事件均对应一个事件句柄,在程序执行时,将相应的函数或语句指定给事件句柄,则在该事件发生时,浏览器便执行指定的函数或语句。

为特定事件定义监听函数有三种方式：
   (1)直接在HTML中定义元素的事件相关属性
        &lt;button onclick="alert('hello')"&gt;按钮&lt;/button&gt;
        &lt;body onload="init()"&gt;...&lt;/body&gt;
        缺点：违反了“内容与行为相分离”的原则，应尽可能少用。
   (2)DOM0级事件
        在JavaScript中为元素的事件相关属性赋值：
        document.getElementById("btn").onclick = function(){ // ...}
        document.body.onload = init;
        function init(){ // ...}
        缺点：此语法实现了“内容与行为相分离”，但元素扔只能绑定一个监听函数。
   (3)DOM2级事件
        高级事件处理方式，一个事件可以绑定多个监听函数：
        btn.addEventListener("click",function(){},false); // DOM
        btn.attachEvent("onclick",function(){}); // IE
        document.body.addEventListener("load",init);
        document.body.attachEvent("onload",init);
        function init(){ //... }
        此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题

DOM事件流
    DOM0级与DOM2级区别：
        1、DOM2支持同一dom元素注册多个同种事件;
           DOM0只能给一个元素的某一个行为绑定一次方法;第二次绑定的会把前面的覆盖掉
        2、DOM2新增了捕获和冒泡的概念
    说明(为什么没有1级DOM)DOM级别1于1998年10月1日成为W3C推荐标准.1级DOM标准中并没有定义事件相关的内容所以没有所谓的1级DOM事件模型

    (2)添加事件：
        addEventListener()
        语法：element.addEventListener(event, function, useCapture)
        功能：用于向指定元素添加事件句柄
        参数：
            event : 必须。字符串，指定事件名。
            function：必须。指定要事件触发时执行的函数。
            useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行
    (3)移除事件：
        removeEventListener()
        语法：element. removeEventListener(event, function,useCapture)
        功能：移除 addEventListener() 方法添加的事件句柄。
        参数：
            event : 必须。字符串，要移除的事件名称。
            function：必须。指定要移除的函数。
            useCapture：可选。布尔值，指定移除事件句柄的阶段。

IE事件流（IE事件处理程序）
    (1)添加事件：
        attachEvent()
        语法：element.attachEvent(event, function)
        功能：用于向指定元素添加事件句柄
        参数：
            event : 必须。字符串，指定事件名，必须加“on”前缀。
            function：必须。指定要事件触发时执行的函数。
    (2)移除事件：
        detachEvent()
        语法：element.detachEvent(event, function)
        功能：移除 attachEvent() 方法添加的事件句柄。
        参数：
            event : 必须。字符串，要移除的事件名称。
            function：必须。指定要移除的函数

event对象常用属性和方法
    type：事件的类型;
    srcElement/target：事件源，就是发生事件的元素；
    cancelBubble：布尔属性，设为true的时候，将停止事件进一步起泡到
    包容层次的元素；(e.cancelBubble = true; 相当于e.stopPropagation(););
    returnValue：布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault(););
    clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置;
    offsetX,offsetY：事件发生的时候，鼠标相对于事件源元素左上角的位置;
    说明：event对象的所有属性列表可以在浏览器控制台中输出查看。

监听方法
 addEventListener()和removeEventListener()
    第一个参数：事件名
    第二个参数：事件处理程序函数
    第三个参数：true则表示在捕获阶段调用，false表示在冒泡阶段调用
 addEventListener()和removeEventListener()
     功能：addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
     功能：removeEventListener():移除事件处理程序。（不能移除匿名添加的函数）
 attachEvent()和detachEvent()
     第一个参数：一个事件名
     第二个参数：事件处理函数
 attachEvent()和detachEvent()
     功能：attachEvent():可以为元素添加多个事件处理程序，触发时会按照添加顺序从后往前依次调用。
     功能：detachEvent():移除事件处理程序。（不能移除匿名添加的函数）

编写兼容主流浏览器的事件处理程序:(IE与非IE)
        function addHandler(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,true);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }else{
                element['on'+type] = handler;
            }
        }


事件的执行脚本
    （1）ele.onclick = function(){ 执行脚本 };
    （2）ele.onclick = fn;    function fn(){ 执行脚本 }

什么是事件: 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
HTML事件:
    语法：&lt;tag 事件=“执行脚本”>&lt;/tag>
    功能：在HTML元素上绑定事件。
    说明：执行脚本可以是一个函数的调用。

DOM0级事件:
    语法：ele.事件=执行脚本
    功能：在DOM对象上绑定事件
    说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
关于this指向:  在事件触发的函数中，this是对该DOM对象的引用

<table border="1">
    <caption>JS事件</caption>
    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">一般事件</td></tr>
    <tr><td>touchstart</td><td>手指触摸屏幕</td></tr>
    <tr><td>touchmove</td><td>手指在屏幕上滑动</td></tr>
    <tr><td>touchend</td><td>手指从屏幕上移开</td></tr>
    <tr><td>onclick</td><td>鼠标点击时触发此事件</td></tr>
    <tr><td>ondblclick</td><td>鼠标双击时触发此事件</td></tr>
    <tr><td>onmousedown</td><td>按下鼠标时触发此事件</td></tr>
    <tr><td>onmouseup</td><td>鼠标按下后松开鼠标时触发此事件</td></tr>
    <tr><td>onmouseover</td><td>鼠标移到某元素之上</td></tr>
    <tr><td>onmousemove</td><td>鼠标在元素上移动时触发此事件</td></tr>
    <tr><td>onmouseout</td><td>当鼠标离开元素时触发此事件</td></tr>
    <tr><td>onkeypress</td><td>某个键盘按键被按下并松开(只会响应字母与数字符号)</td></tr>
    <tr><td>onkeydown</td><td>当键盘上某个按键被按下时触发此事件</td></tr>
    <tr><td>onkeyup</td><td>某个键盘按键被松开</td></tr>
    <tr><td>keyCode</td><td>获取按下的键盘按键的字符代码; event.keyCode;返回onkeypress、onkeydown 或 onkeyup</td></tr>

    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">页面相关事件</td></tr>
    <tr><td>onabort</td><td>图片在下载时被用户中断</td></tr>
    <tr><td>onbeforeunload</td><td>当前页面的内容将要被改变时触发此事件</td></tr>
    <tr><td>onerror</td><td>出现错误时触发此事件</td></tr>
    <tr><td>onload</td><td>页面加载完时触发此事件</td></tr>
    <tr><td>onmove</td><td>浏览器的窗口被移动时触发此事件</td></tr>
    <tr><td>onresize</td><td>当浏览器的窗口大小被改变时触发此事件</td></tr>
    <tr><td>onscroll</td><td>浏览器的滚动条位置发生变化时触发此事件</td></tr>
    <tr><td>onstop</td><td>浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断</td></tr>
    <tr><td>onunload</td><td>当前页面将被改变时触发此事件</td></tr>


    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">表单事件</td></tr>
    <tr><td>onblur</td><td>当前元素失去焦点时触发此事件</td></tr>
    <tr><td>onchange</td><td>当前元素失去焦点并且元素的内容发生改变而触发此事件</td></tr>
    <tr><td>onfocus</td><td>当某个元素获得焦点时触发此事件</td></tr>
    <tr><td>onreset</td><td>当表单中 RESET 的属性被激发时触发此事件</td></tr>
    <tr><td>onsubmit</td><td>一个表单被递交时触发此事件</td></tr>

    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">滚动字幕事件</td></tr>
    <tr><td>onbounce</td><td>在 Marquee 内的内容移动至 Marquee 显示范围之外时触发此事件</td></tr>
    <tr><td>onfinish</td><td>当 Marquee 元素完成需要显示的内容后触发此事件</td></tr>
    <tr><td>onstart</td><td>当 Marquee 元素开始显示内容时触发此事件</td></tr>

    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">外部事件</td></tr>
    <tr><td>onafterprint</td><td>当文档被打印后触发此事件</td></tr>
    <tr><td>onbeforeprint</td><td>当文档即将打印时触发此事件</td></tr>
    <tr><td>onfilterchange</td><td>当某个对象的滤镜效果发生变化时触发的事件</td></tr>
    <tr><td>onhelp</td><td>当浏览者按下 F1 或者浏览器的帮助选择时触发此事件</td></tr>
    <tr><td>onpropertychange</td><td>当对象的属性之一发生变化时触发此事件</td></tr>
    <tr><td>onreadystatechange</td><td>当对象的初始化属性值发生变化时触发此事件</td></tr>

    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">数据绑定</td></tr>
    <tr><td>onafterupdate</td><td>当数据完成由数据源到对象的传送时触发此事件</td></tr>
    <tr><td>oncellchange</td><td>当数据来源发生变化时</td></tr>
    <tr><td>ondataavailable</td><td>当数据接收完成时触发事件</td></tr>
    <tr><td>ondatasetchanged</td><td>数据在数据源发生变化时触发的事件</td></tr>
    <tr><td>ondatasetcomplete</td><td>当来自数据源的全部有效数据读取完毕时触发此事件</td></tr>
    <tr><td>onerrorupdate</td><td>当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate 事件</td></tr>
    <tr><td>onrowenter</td><td>当前数据源的数据发生变化并且有新的有效数据时触发的事件</td></tr>
    <tr><td>onrowexit</td><td>当前数据源的数据将要发生变化时触发的事件</td></tr>
    <tr><td>onrowsdelete</td><td>当前数据记录将被删除时触发此事件</td></tr>
    <tr><td>onrowsinserted</td><td>当前数据源将要插入新数据记录时触发此事件</td></tr>

    <tr><td colspan="2" style="background-color: #433b90;text-align: center;color: red">编辑事件</td></tr>
    <tr><td>onbeforecopy</td><td>当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件</td></tr>
    <tr><td>onbeforecut</td><td>当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件</td></tr>
    <tr><td>onbeforeeditfocus</td><td>当前元素将要进入编辑状态</td></tr>
    <tr><td>onbeforepaste</td><td>内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件</td></tr>
    <tr><td>onbeforeupdate</td><td>当浏览者粘贴系统剪贴板中的内容时通知目标对象</td></tr>
    <tr><td>oncontextmenu</td><td>当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件</td></tr>
    <tr><td>oncopy</td><td>当页面当前的被选择内容被复制后触发此事件</td></tr>
    <tr><td>oncut</td><td>当页面当前的被选择内容被剪切时触发此事件</td></tr>
    <tr><td>ondrag</td><td>当某个对象被拖动时触发此事件 [活动事件]</td></tr>
    <tr><td>ondragdrop</td><td>一个外部对象被鼠标拖进当前窗口或者帧</td></tr>
    <tr><td>ondragend</td><td>当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了</td></tr>
    <tr><td>ondragenter</td><td>当对象被鼠标拖动的对象进入其容器范围内时触发此事件</td></tr>
    <tr><td>ondragleave</td><td>当对象被鼠标拖动的对象离开其容器范围内时触发此事件</td></tr>
    <tr><td>ondragover</td><td>当某被拖动的对象在另一对象容器范围内拖动时触发此事件</td></tr>
    <tr><td>ondragstart</td><td>当某对象将被拖动时触发此事件</td></tr>
    <tr><td>ondrop</td><td>在一个拖动过程中，释放鼠标键时触发此事件</td></tr>
    <tr><td>onlosecapture</td><td>当元素失去鼠标移动所形成的选择焦点时触发此事件</td></tr>
    <tr><td>onpaste</td><td>当内容被粘贴时触发此事件</td></tr>
    <tr><td>onselect</td><td>当文本内容被选择时的事件</td></tr>
    <tr><td>onselectstart</td><td>当文本内容选择将开始发生时触发的事件</td></tr>

</table>
            </pre>
        </div>
        <div class="one">
            <h1 id="js_bom">JS BOM基础</h1>
            <pre>
Screen 对象含有关客户端显示屏幕的信息,目前没有应用于Screen对象的公开标准,不过所有浏览器都支持该对象
    属性: availWidth  返回显示屏幕的宽度(不含任务栏)   availHeight 返回显示屏幕的高度(不含任务栏)
         width  返回显示器屏幕的宽度                 height 返回显示器屏幕的高度

示例:   &lt;script type="text/javascript"&gt;
            console.log("屏幕宽度是："+screen.width);         //(含任务栏)
            console.log("屏幕高度是："+screen.height);
            console.log("屏幕可用宽度是："+screen.availWidth);  //(不含任务栏)
            console.log("屏幕可用高度是："+screen.availHeight);
            // 当浏览器窗口变化时,窗口的文档显示区域也随之变化(不包括控制台的宽度和高度)
            console.log("窗口的文档显示高度是："+window.innerHeight); //返回窗口的文档显示区的高度(不包括菜单栏、工具栏)
            console.log("窗口的文档显示宽度是："+window.innerWidth);  //返回窗口的文档显示区的宽度(不包括边框)
        &lt;/script&gt;

BOM（browser object model）浏览器对象模型;
window是浏览器的一个实例,在浏览器中window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
Window对象的方法:
    1)window.confirm("content")
        功能：显示带有一段消息和一个确认按钮的警告框
        语法：window.confirm(“message")
        功能：显示一个带有指定消息和OK及取消按钮的对话框
        返回值：如果用户点击确定按钮,则confirm()返回true;如果用户点击取消按钮,则confirm()返回false
    2)window.prompt(text,defaultText)
        参数说明: text:要在对话框中显示的纯文本(而不是HTML格式的文本); defaultText: 默认的输入文本
        返回值：如果用户单击提示框的取消按钮，则返回null;如果用户单击确认按钮，则返回输入字段当前显示的文本
    3)window.open(pageURL,name,parameters)
        功能：打开一个新的浏览器窗口或查找一个已命名的窗口
        参数说明： pageURL:子窗口路径;    name:子窗口句柄   parameters:窗口参数(各参数用逗号分隔)
    4)window.close( )
        功能：关闭浏览器窗口

超时调用:       id = setTimeout(fn,3000);  //3秒后执行fn函数
清除超时调用:    clearTimeout(id);         //取消超时调用
间歇调用:       setInterval(fn,3000)       //每间隔3秒执行fn函数

location对象: 提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是window对象的属性,也是document对象的属性
location对象的常用属性:
    (1) location.href   //返回当前加载页面的完整URL;  location.href与window.location.href等价
    (2) location.hash   //返回URL中的hash(#号后 跟零或多个字符)如果不包含则返回空字符串
    (3) location.host   //返回服务器名称和端口号(如果有)
    (4) location.hostname    //返回不带端口号的服务器名称。
    (5) location.pathname    //返回URL中的目录或文件名。
    (6) location.port        //返回URL中指定的端口号,如果没有,返回空字符串。
    (7) location.protocol    //返回页面使用的协议。
    (8) location.search      //返回URL的查询字符串;这个字符串以问号开头。
    (9) location.replace(url)   //重新定向URL; 使用location.replace不会在历史记录中生成新纪录
    (10) location.reload()      //重新加载当前显示的页面; location.reload()有可能从缓存中加载;location.reload(true)从服务器重新加载

掌握BOM中的history(历史对象)对象:
    history.back()      //回到历史记录的上一步;相当于使用了history.go(-1);
    history.forward()   //回到历史记录的下一步;相当于使用了history.go(1);

Navigator对象:
    1、掌握Navigator对象的userAgent属性
        UserAgent: 用来识别浏览器名称、版本、引擎以及操作系统等信息的内容
    2、掌握如何判断浏览器的类型
            </pre>
        </div>
        <div class="one">
            <h1 id="js_window">JS 窗口相关</h1>
            <pre class="bj">
(1)屏幕宽/高:          screen.width/height             //含任务栏
(2)屏幕可用宽/高:       screen.availWidth/availHeight   //不含任务栏
(3)窗口的文档显示高/宽:  window.innerHeight/innerWidth   //高度(不包括菜单栏、工具栏);宽度(不包括边框)
        当浏览器窗口变化时,窗口的文档显示区域也随之变化(不包括控制台的宽度和高度)
(4)网页可见区域宽/高: document.body.clientWidth/clientHeight;
(5)网页可见区域宽/高: document.body.offsetWidth/offsetHeight (包括边线的宽);
(6)网页正文全文宽/高: document.body.scrollWidth/scrollHeight;
(7)网页被卷去的高/左: document.body.scrollTop/scrollLeft;
(8)网页正文部分上/左: window.screenTop/screenLeft;
(9)屏幕分辨率的高/宽: window.screen.height/width;
(10)屏幕可用工作区高/宽: window.screen.availHeight/availWidth;

scrollHeight/scrollWidth:获取对象的滚动高度/宽度
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:   获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:     获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:      获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX:相对文档的水平座标   event.clientY:相对文档的垂直座标
event.offsetX:相对容器的水平坐标   event.offsetY:相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值
event.clientX + document.documentElement.scrollTop: 相对文档的水平座标 + 垂直方向滚动的量
document.documentElement.scrollTop:当前页面的滚动条纵坐标位置
            </pre>
        </div>
        <div class="one">
            <h1 id="js_ps">切图工具PS |
                <a target="_blank" href="../demo/10-js实战Demo.html">实战Demo</a> |
                <a href="https://www.toptal.com/developers/css/sprite-generator" target="_blank">在线制作雪碧图</a>
            </h1>
            <pre>
                标注工具: PxCook   切图工具:PhotoShop
Photoshop优化: 缓存盘路径更改 + 默认单位的修改      Photoshop预设: 工具 + 标尺 + 图层 + 信息 + 字符

稿件与标尺:  新建稿件 + 标尺的使用

切图常用工具详解:   1、拖拽  2、选区  3、裁切  4、吸管  5、色块  6、文字

图层与分组: 创建图层与分组  + 合并图层与分组  + 删除图层与分组

信息与裁切: 信息工具 + 透明图片的裁切       图片的格式选择: GIF + PNG + JPG

切图的优化: 1、颜色代替图片  2、少图多用  3、雪碧图的制作   4、字体图标的使用

快捷键的使用: 1、操作类快捷键  2、工具类快捷键  3、快捷键失效

切图辅助: 1、MarkMan  2、TinyPNG  3、前端自动化
            </pre>
            <h2>PS-快捷键1:工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)</h2>
            <pre>
矩形、椭圆选框工具 【M】               移动工具 【V】                        套索、多边形套索、磁性套索 【L】
魔棒工具 【W】                       裁剪工具 【C】                        切片工具、切片选择工具 【K】
喷枪工具 【J】                       文字工具 【T】                        画笔工具、铅笔工具 【B】
像皮图章、图案图章 【S】               历史画笔工具、艺术历史画笔 【Y】          快速输入工具选项(当前工具选项面板中至少有一个可调节数字) 【0】至【9】
渐变工具、油漆桶工具 【G】             模糊、锐化、涂抹工具 【R】               抓手工具 【H】
减淡、加深、海棉工具 【O】             路径选择工具、直接选取工具 【A】          矩形、圆边矩形、椭圆、多边形、直线 【U】
钢笔、自由钢笔 【P】                  吸管、颜色取样器、度量工具 【I】          默认前景色和背景色 【D】
写字板、声音注释 【N】                像皮擦、背景擦除、魔术像皮擦 【E】         切换前景色和背景色 【X】
切换标准模式和快速蒙板模式 【Q】        临时使用移动工具 【Ctrl】               标准屏幕模式、带有菜单栏的全屏模式、全屏模式 【F】
临时使用吸色工具 【Alt】              临时使用抓手工具 【空格】                跳到 ImageReady3.0 中 【Ctrl】+【Shift】+【M】
循环选择画笔 【[】或【]】             缩放工具 【Z】                         建立新渐变(在”渐变编辑器”中) 【Ctrl】+【N】
                    </pre>
            <h2>PS-快捷键2:文件操作</h2>
            <pre>
新建图形文件 【Ctrl】+【N】               打开已有的图像 【Ctrl】+【O】             打开为... 【Ctrl】+【Alt】+【O】
关闭当前图像 【Ctrl】+【W】               保存当前图像 【Ctrl】+【S】               另存为... 【Ctrl】+【Shift】+【S】
页面设置 【Ctrl】+【Shift】+【P】         打印预览 【Ctrl】+【Alt】+【P】           存储为网页用图形 【Ctrl】+【Alt】+【Shift】+【S】
打印 【Ctrl】+【P】                     退出 Photoshop 【Ctrl】+【Q】
            </pre>
            <h2>PS-快捷键3:编辑操作</h2>
            <pre>
还原/重做前一步操作 【Ctrl】+【Z】                       一步一步向前还原 【Ctrl】+【Alt】+【Z】
一步一步向后重做 【Ctrl】+【Shift】+【Z】                淡入/淡出 【Ctrl】+【Shift】+【F】
剪切选取的图像或路径 【Ctrl】+【X】或【F2】               拷贝选取的图像或路径 【Ctrl】+【C】
合并拷贝 【Ctrl】+【Shift】+【C】                      将剪贴板的内容粘到当前图形中 【Ctrl】+【V】或【F4】
将剪贴板的内容粘到选框中 【Ctrl】+【Shift】+【V】         自由变换 【Ctrl】+【T】
应用自由变换(在自由变换模式下) 【Enter】                  从中心或对称点开始变换 (在自由变换模式下) 【Alt】
限制(在自由变换模式下) 【Shift】                        扭曲(在自由变换模式下) 【Ctrl】
取消变形(在自由变换模式下) 【Esc】                       自由变换复制的象素数据 【Ctrl】+【Shift】+【T】
再次变换复制的象素数据并建立一个副本 【Ctrl】+【Shift】+【Alt】+【T】
删除选框中的图案或选取的路径 【DEL】
用背景色填充所选区域或整个图层 【Ctrl】+【BackSpace】或【Ctrl】+【Del】
用前景色填充所选区域或整个图层 【Alt】+【BackSpace】或【Alt】+【Del】
弹出“填充”对话框 【Shift】+【BackSpace】                  从历史记录中填充 【Alt】+【Ctrl】+【Backspace】
打开“颜色设置”对话框 【Ctrl】+【Shift】+【K】
打开“预先调整管理器”对话框 【Alt】+【E】放开后按【M】         预设画笔（在“预先调整管理器”对话框中） 【Ctrl】+【1】
预设颜色样式（在“预先调整管理器”对话框中） 【Ctrl】+【2】      预设渐变填充（在“预先调整管理器”对话框中） 【Ctrl】+【3】
预设图层效果（在“预先调整管理器”对话框中） 【Ctrl】+【4】      预设图案填充（在“预先调整管理器”对话框中） 【Ctrl】+【5】
预设轮廓线（在“预先调整管理器”对话框中） 【Ctrl】+【6】        预设定制矢量图形（在“预先调整管理器”对话框中） 【Ctrl】+【7】
打开“预置”对话框 【Ctrl】+【K】                           显示最后一次显示的“预置”对话框 【Alt】+【Ctrl】+【K】
设置“常规”选项(在预置对话框中) 【Ctrl】+【1】               设置“存储文件”(在预置对话框中) 【Ctrl】+【2】
设置“显示和光标”(在预置对话框中) 【Ctrl】+【3】              设置“透明区域与色域”(在预置对话框中) 【Ctrl】+【4】
设置“单位与标尺”(在预置对话框中) 【Ctrl】+【5】              设置“参考线与网格”(在预置对话框中) 【Ctrl】+【6】
设置“增效工具与暂存盘”(在预置对话框中) 【Ctrl】+【7】         设置“内存与图像高速缓存”(在预置对话框中) 【Ctrl】+【8】
            </pre>
            <h2>PS-快捷键4:图像调整</h2>
            <pre>
调整色阶 【Ctrl】+【L】                                     自动调整色阶 【Ctrl】+【Shift】+【L】
自动调整对比度 【Ctrl】+【Alt】+【Shift】+【L】                打开曲线调整对话框 【Ctrl】+【M】
在所选通道的曲线上添加新的点(‘曲线’对话框中) 在图象中【Ctrl】加点按
在复合曲线以外的所有曲线上添加新的点(‘曲线’对话框中) 【Ctrl】+【Shift】加点按
移动所选点(‘曲线’对话框中) 【↑】/【↓】/【←】/【→】
以 10 点为增幅移动所选点以 10 点为增幅(‘曲线’对话框中) 【Shift】+【箭头】
选择多个控制点(‘曲线’对话框中) 【Shift】加点按                  前移控制点(‘曲线’对话框中) 【Ctrl】+【Tab】
后移控制点(‘曲线’对话框中) 【Ctrl】+【Shift】+【Tab】           添加新的点(‘曲线’对话框中) 点按网格
删除点(‘曲线’对话框中) 【Ctrl】加点按点                        取消选择所选通道上的所有点(‘曲线’对话框中) 【Ctrl】+【D】
使曲线网格更精细或更粗糙(‘曲线’对话框中) 【Alt】加点按网格         选择彩色通道(‘曲线’对话框中) 【Ctrl】+【~】
选择单色通道(‘曲线’对话框中) 【Ctrl】+【数字】                  打开“色彩平衡”对话框 【Ctrl】+【B】
打开“色相/饱和度”对话框 【Ctrl】+【U】                        全图调整(在色相/饱和度”对话框中) 【Ctrl】+【~】
只调整红色(在色相/饱和度”对话框中) 【Ctrl】+【1】               只调整黄色(在色相/饱和度”对话框中) 【Ctrl】+【2】
只调整绿色(在色相/饱和度”对话框中) 【Ctrl】+【3】               只调整青色(在色相/饱和度”对话框中) 【Ctrl】+【4】
只调整蓝色(在色相/饱和度”对话框中) 【Ctrl】+【5】               只调整洋红(在色相/饱和度”对话框中) 【Ctrl】+【6】
去色 【Ctrl】+【Shift】+【U】                              反相 【Ctrl】+【I】
打开“抽取(Extract)”对话框 【Ctrl】+【Alt】+【X】             边缘增亮工具(在“抽取”对话框中) 【B】
填充工具(在“抽取”对话框中) 【G】                             擦除工具(在“抽取”对话框中) 【E】
清除工具(在“抽取”对话框中) 【C】                             边缘修饰工具(在“抽取”对话框中) 【T】
缩放工具(在“抽取”对话框中) 【Z】                             抓手工具(在“抽取”对话框中) 【H】
改变显示模式(在“抽取”对话框中) 【F】                          加大画笔大小(在“抽取”对话框中) 【]】
减小画笔大小(在“抽取”对话框中) 【[】                          完全删除增亮线(在“抽取”对话框中) 【Alt】+【BackSpace】
增亮整个抽取对像(在“抽取”对话框中) 【Ctrl】+【BackSpace】      打开“液化(Liquify)”对话框 【Ctrl】+【Shift】+【X】
扭曲工具(在“液化”对话框中) 【W】                             顺时针转动工具(在“液化”对话框中) 【R】
逆时针转动工具(在“液化”对话框中) 【L】                        缩拢工具(在“液化”对话框中) 【P】
扩张工具(在“液化”对话框中) 【B】                             反射工具(在“液化”对话框中) 【M】
重构工具(在“液化”对话框中) 【E】                             冻结工具(在“液化”对话框中) 【F】
解冻工具(在“液化”对话框中) 【T】                             应用“液化”效果并退回 Photoshop 主界面(在“液化”对话框中) 【Enter】
放弃“液化”效果并退回 Photoshop 主界面(在“液化”对话框中) 【ESC】
                    </pre>
            <h2>PS-快捷键5:图层操作</h2>
            <pre>
从对话框新建一个图层 【Ctrl】+【Shift】+【N】                           以默认选项建立一个新的图层 【Ctrl】+【Alt】+【Shift】+【N】
通过拷贝建立一个图层（无对话框） 【Ctrl】+【J】                           从对话框建立一个通过拷贝的图层 【Ctrl】+【Alt】+【J】
通过剪切建立一个图层（无对话框） 【Ctrl】+【Shift】+【J】                  从对话框建立一个通过剪切的图层 【Ctrl】+【Shift】+【Alt】+【J】
与前一图层编组 【Ctrl】+【G】                                         取消编组 【Ctrl】+【Shift】+【G】
将当前层下移一层 【Ctrl】+【[】                                       将当前层上移一层 【Ctrl】+【]】
将当前层移到最下面 【Ctrl】+【Shift】+【[】                            将当前层移到最上面 【Ctrl】+【Shift】+【]】
激活下一个图层 【Alt】+【[】                                         激活上一个图层 【Alt】+【]】
激活底部图层 【Shift】+【Alt】+【[】                                 激活顶部图层 【Shift】+【Alt】+【]】
向下合并或合并联接图层 【Ctrl】+【E】                                 合并可见图层 【Ctrl】+【Shift】+【E】
盖印或盖印联接图层 【Ctrl】+【Alt】+【E】                             盖印可见图层 【Ctrl】+【Alt】+【Shift】+【E】
调整当前图层的透明度(当前工具为无数字参数的,如移动工具) 【0】至【9】         保留当前图层的透明区域(开关) 【/】
使用预定义效果(在”效果”对话框中) 【Ctrl】+【1】                        混合选项(在”效果”对话框中) 【Ctrl】+【2】
投影选项(在”效果”对话框中) 【Ctrl】+【3】                             内部阴影(在”效果”对话框中) 【Ctrl】+【4】
外发光(在”效果”对话框中) 【Ctrl】+【5】                               内发光(在”效果”对话框中) 【Ctrl】+【6】
斜面和浮雕(在”效果”对话框中) 【Ctrl】+【7】                             轮廓(在”效果”对话框中) 【Ctrl】+【8】
材质(在”效果”对话框中) 【Ctrl】+【9】
                    </pre>
            <h2>PS-快捷键6:图层混合模式</h2>
            <pre>
循环选择混合模式 【Shift】+【-】或【+】                    正常 Normal 【Shift】+【Alt】+【N】
溶解 Dissolve 【Shift】+【Alt】+【I】                   正片叠底 Multiply 【Shift】+【Alt】+【M】
屏幕 Screen 【Shift】+【Alt】+【S】                     叠加 Overlay 【Shift】+【Alt】+【O】
柔光 Soft Light 【Shift】+【Alt】+【F】                 强光 Hard Light 【Shift】+【Alt】+【H】
颜色减淡 Color Dodge 【Shift】+【Alt】+【D】             颜色加深 Color Burn 【Shift】+【Alt】+【B】
变暗 Darken 【Shift】+【Alt】+【K】                     变亮 Lighten 【Shift】+【Alt】+【G】
差值 Difference 【Shift】+【Alt】+【E】                 排除 Exclusion 【Shift】+【Alt】+【X】
色相 Hue 【Shift】+【Alt】+【U】                        饱和度 Saturation 【Shift】+【Alt】+【T】
颜色 Color 【Shift】+【Alt】+【C】                      光度 Luminosity 【Shift】+【Alt】+【Y】
去色 海棉工具+【Shift】+【Alt】+【J】                     加色 海棉工具+【Shift】+【Alt】+【A】
                    </pre>
            <h2>PS-快捷键7:选择功能</h2>
            <pre>
全部选取 【Ctrl】+【A】                             取消选择 【Ctrl】+【D】
重新选择 【Ctrl】+【Shift】+【D】                    羽化选择 【Ctrl】+【Alt】+【D】
反向选择 【Ctrl】+【Shift】+【I】                    载入选区 【Ctrl】+点按图层、路径、通道面板中的缩约图

滤镜
    按上次的参数再做一次上次的滤镜 【Ctrl】+【F】
    退去上次所做滤镜的效果 【Ctrl】+【Shift】+【F】
    重复上次所做的滤镜(可调参数) 【Ctrl】+【Alt】+【F】
    选择工具(在“3D 变化”滤镜中) 【V】
    直接选择工具(在“3D 变化”滤镜中) 【A】
    立方体工具(在“3D 变化”滤镜中) 【M】
    球体工具(在“3D 变化”滤镜中) 【N】
    柱体工具(在“3D 变化”滤镜中) 【C】
    添加锚点工具(在“3D 变化”滤镜中) 【+】
    减少锚点工具(在“3D 变化”滤镜中) 【-】
    轨迹球(在“3D 变化”滤镜中) 【R】
    全景相机工具(在“3D 变化”滤镜中) 【E】
    移动视图(在“3D 变化”滤镜中) 【H】
    缩放视图(在“3D 变化”滤镜中) 【Z】
    应用三维变形并退回到 Photoshop 主界面(在“3D 变化”滤镜中) 【Enter】
    放弃三维变形并退回到 Photoshop 主界面(在“3D 变化”滤镜中) 【Esc】
                    </pre>
            <h2>PS-快捷键8:视图操作</h2>
            <pre>
选择彩色通道 【Ctrl】+【~】                               选择单色通道 【Ctrl】+【数字】
选择快速蒙板 【Ctrl】+【\】                               始终在视窗显示复合通道 【~】
以 CMYK 方式预览(开关) 【Ctrl】+【Y】                     打开/关闭色域警告 【Ctrl】+【Shift】+【Y】
放大视图 【Ctrl】+【+】                                  缩小视图 【Ctrl】+【-】
满画布显示 【Ctrl】+【0】                                实际象素显示 【Ctrl】+【Alt】+【0】
向上卷动一屏 【PageUp】                                 向下卷动一屏 【PageDown】
向左卷动一屏 【Ctrl】+【PageUp】                         向右卷动一屏 【Ctrl】+【PageDown】
向上卷动 10 个单位 【Shift】+【PageUp】                  向下卷动 10 个单位 【Shift】+【PageDown】
向左卷动 10 个单位 【Shift】+【Ctrl】+【PageUp】          向右卷动 10 个单位 【Shift】+【Ctrl】+【PageDown】
将视图移到左上角 【Home】                                 将视图移到右下角 【End】
显示/隐藏选择区域 【Ctrl】+【H】                        显示/隐藏路径 【Ctrl】+【Shift】+【H】
显示/隐藏标尺 【Ctrl】+【R】                              捕捉 【Ctrl】+【;】
锁定参考线 【Ctrl】+【Alt】+【;】                      显示/隐藏“颜色”面板 【F6】
显示/隐藏“图层”面板 【F7】                            显示/隐藏“信息”面板 【F8】
显示/隐藏“动作”面板 【F9】                            显示/隐藏所有命令面板 【TAB】
显示或隐藏工具箱以外的所有调板 【Shift】+【TAB】           文字处理(在字体编辑模式中)
显示/隐藏“字符”面板 【Ctrl】+【T】                      显示/隐藏“段落”面板 【Ctrl】+【M】
左对齐或顶对齐 【Ctrl】+【Shift】+【L】                  中对齐 【Ctrl】+【Shift】+【C】
右对齐或底对齐 【Ctrl】+【Shift】+【R】                  左／右选择 1 个字符 【Shift】+【←】/【→】
下／上选择 1 行 【Shift】+【↑】/【↓】                   选择所有字符 【Ctrl】+【A】
显示/隐藏字体选取底纹 【Ctrl】+【H】                      选择从插入点到鼠标点按点的字符 【Shift】加点按
左／右移动 1 个字符 【←】/【→】                         下／上移动 1 行 【↑】/【↓】
左／右移动 1 个字 【Ctrl】+【←】/【→】                   将所选文本的文字大小减小 2 点象素 【Ctrl】+【Shift】+【<】
将所选文本的文字大小增大 2 点象素 【Ctrl】+【Shift】+【>】
将所选文本的文字大小减小 10 点象素 【Ctrl】+【Alt】+【Shift】+【<】
将所选文本的文字大小增大 10 点象素 【Ctrl】+【Alt】+【Shift】+【>】
将行距减小 2 点象素 【Alt】+【↓】                       将行距增大 2 点象素 【Alt】+【↑】
将基线位移减小 2 点象素 【Shift】+【Alt】+【↓】           将基线位移增加 2 点象素 【Shift】+【Alt】+【↑】
将字距微调或字距调整减小 20/1000ems 【Alt】+【←】         将字距微调或字距调整增加 20/1000ems 【Alt】+【→】
将字距微调或字距调整减小 100/1000ems 【Ctrl】+【Alt】+【←】
将字距微调或字距调整增加 100/1000ems 【Ctrl】+【Alt】+【→】
                    </pre>
        </div>

    </div>
</div>
</body>
</html>